<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        #app {
            width: 500px;
            height: 500px;
            margin: 50px auto;
            border: 1px solid #ccc;
            padding: 10px;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            width: 100%;
            height: 400px;
            align-items: center;
            flex-wrap: wrap;
        }

        li {
            margin-left: 5px;
            width: 60px;
            height: 30px;
            border: 1px solid red;
            text-align: center;
            cursor: pointer;
        }

        .active {
            background-color: yellow;
            color: blue;
        }

        p {
            margin: 10px 0 0;
            padding: 0;
        }

        p span {
            margin-left: 12px;
            border: 1px solid red;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">
        <select name="" id="year" v-model="choseYear">
            <option v-for="(item, i) in years" :key="i" :value="item">{{item}}</option>
        </select>
        年
        <select name="" id="month" v-model="choseMonth">
            <option v-for="(item, i) in months" :key="i" :value="item">{{item}}</option>
        </select>
        月
        <p>
            <span v-for="(item, i) in weeks" :key="i">
                {{item}}
            </span>
        </p>
        <ul v-if="oneDay !== 0">
            <li v-for="item in oneDay - 1" :key="item"></li>
            <li v-for="(item, i) in nowMonthDay"
                :class="i == new Date().getDay() - 1 && choseMonth == new Date().getMonth() + 1 && choseYear == new Date().getFullYear() ? 'active' : ''">
                {{item}}
            </li>
        </ul>
        <ul v-else>
            <li v-for="(item, i) in nowMonthDay"
                :class="i == new Date().getDay() - 1 && choseMonth == new Date().getMonth() + 1 && choseYear == new Date().getFullYear() ? 'active' : ''">
                {{item}}
            </li>
        </ul>

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                choseYear: '',
                choseMonth: '',
                weeks: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日",]
            },
            methods: {
            },
            computed: {
                // 获取年
                years() {
                    var yearsArr = []
                    var year = new Date().getFullYear();
                    this.choseYear = year
                    for (let i = year - 50; i < year + 100; i++) {
                        yearsArr.push(i)
                    }
                    return yearsArr
                },
                // 获取月
                months() {
                    var monthsArr = []
                    var month = new Date().getMonth() + 1;
                    this.choseMonth = month
                    for (let i = 1; i <= 12; i++) {
                        monthsArr.push(i)
                    }
                    return monthsArr
                },
                // 获取这个月有多少天
                nowMonthDay() {
                    var day = new Date(this.choseYear, this.choseMonth, 0).getDate()
                    return day
                },
                // 获取这个月的第一天是星期几
                oneDay() {
                    var week = new Date(`${this.choseYear}-${this.choseMonth}-1`).getDay()
                    return week
                }
            }
        })
    </script>
</body>

</html>